<template>
  <n-space justify="center">
    <n-form
        ref="formRef"
        :model="collection"
        label-placement="left"
        :label-width="160"
        :style="{
        maxWidth: '640px'
      }"
    >
      <n-form-item label="命名空间" path="namespace" feedback="最大12个字符,支持小写字母、数字和下划线的组合">
        <n-input v-model:value="collection.namespace" placeholder="" maxlength="12"/>
      </n-form-item>
      <n-form-item label="集合名称" path="collectionName" feedback="最大24个字符,支持小写字母、数字和下划线的组合">
        <n-input v-model:value="collection.collectionName" placeholder="" maxlength="24"/>
      </n-form-item>
      <n-form-item label="存储组件" path="storageEngine" feedback="保留图片及人脸信息的存储组件">
        <n-select v-model:value="collection.storageEngine" placeholder="" :options="['ALI_OSS','CURR_DB','MIN_IO','TCE_COS'].map(v => { return {label: v, value: v, disabled: v !== 'CURR_DB'}})"/>
      </n-form-item>
      <n-form-item label="保留信息" path="storageFaceInfo" feedback="是否保留图片及人脸信息">
        <n-switch v-model="collection.storageFaceInfo" />
      </n-form-item>
      <n-form-item label="人脸属性" path="faceColumns" feedback="自定义的人脸属性字段">
        <column-info v-model:value="collection.faceColumns"/>
      </n-form-item>
      <n-form-item label="样本属性" path="sampleColumns" feedback="自定义的样本属性字段">
        <column-info v-model:value="collection.sampleColumns"/>
      </n-form-item>
      <n-form-item label="集合描述" path="collectionComment" feedback="最大128个字符">
        <n-input v-model:value="collection.collectionComment" placeholder="" maxlength="128"/>
      </n-form-item>
    </n-form>
  </n-space>
  <n-space justify="center">
    <n-button type="primary" @click="handleSubmit">
      <template #icon>
        <n-icon>
          <save-icon />
        </n-icon>
      </template>
      创建集合
    </n-button>
  </n-space>
</template>

<script>
import {useSystemStore} from "@store/system";
import ColumnInfo from "@component/common/ColumnInfo";
import { Save as SaveIcon } from '@vicons/ionicons5'
import { createCollection } from "@api/collection";

const system = useSystemStore();
export default {
  name: "CollectionCreate",
  components: { ColumnInfo, SaveIcon },
  data () {
    return {
      collection: {
        collectionComment: "",
        collectionName: system.collection,
        faceColumns: [],
        namespace: system.namespace,
        replicasNum: 0,
        sampleColumns: [],
        shardsNum: 0,
        storageEngine: "CURR_DB",
        storageFaceInfo: true,
      },
    }
  },
  methods: {
    handleSubmit () {
      createCollection(this.collection).then((res) => {
        if (res.data.code !== 0) {
          $uiMsg.error("创建失败：" + res.data.message);
          return;
        }
        $uiMsg.success("创建成功！");
      });
    }
  }
}
</script>

<style scoped>

</style>
